<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>菜单工具插件</title>
    <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>

<body>
<h2><pre>
     菜单工具插件可以通过&lt;ul&gt;创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标，
    调用格式如下：$(selector).menu({options});
    selector参数为菜单列表中最外层&lt;ul&gt;元素，options为menu()方法的配置对象。
</pre></h2>
<ul id="menu">
    <li><a href="#">小明一中</a>
        <ul>
            <li><a href="#">高中部</a>
                <ul>
                    <li><a href="#">高一(1)班</a></li>
                    <li><a href="#">高一(2)班</a></li>
                    <li><a href="#">高一(3)班</a>
                        <ul>
                            <li><a href="#">小胡</a></li>
                            <li><a href="#">小李</a></li>
                            <li><a href="#">小陈</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">初中部</a>
                <ul>
                    <li><a href="#">初一(1)班</a></li>
                    <li><a href="#">初一(2)班</a></li>
                    <li><a href="#">初一(3)班</a></li>
                </ul>
            </li>
            <li><a href="#">教研部</a></li>
        </ul>
    </li>
    <li class="ui-state-disabled"><a href="#">大明二中</a></li>
</ul>

<script type="text/javascript">
    $(function () {
        $("#menu").menu();
    });
</script>
</body>
</html>